<template>
    <div class="guide_page">
        <div class="tittle">设计向导</div>
        <div v-if="questionnaire.publish_time == null">
            <p class="guide_text" style="font-size: 20px; margin-top: 20px;">该问卷未发布，当前能进行具体的设计操作如下：</p>
            <p style="margin-top: 50px;">点击页面上方的开关👆发布问卷</p>
            <div class="link" @click="GoToEdit">
                编辑问卷>>
            </div>
            <p class="guide_text">可以进入问卷编辑页面，进行问卷内容的修改和增加</p>
            <div class="link">
                <router-link :to="{path:'/preview',query:{questionnaireId:encode_qid, index:encode_index}}">预览问卷>></router-link>
            </div>
            <p class="guide_text">可以预览编辑完成后的问卷整体的呈现形式。</p>
        </div>
        <div v-else>
            <p class="guide_text" style="font-size: 20px; margin-top: 20px;">该问卷已发布，当前能进行具体的设计操作如下：</p>
            <p style="margin-top: 50px;">点击页面上方的回收开关👆以控制问卷是否处于回收开放状态。</p>
            <div class="link">
                返回管理页面>>
            </div>
            <p class="guide_text">可以进入问卷编辑页面，进行问卷内容的修改和增加</p>
            <div class="link">
                <router-link :to="{name:'send'}">获取问卷链接>></router-link>
            </div>
            <p class="guide_text">跳转至问卷发布管理页面获取链接和二维码。</p>
            <div class="link">
                <router-link :to="{path:'/preview',query:{questionnaireId:encode_qid, index:encode_index}}">预览问卷>></router-link>
            </div>
            <p class="guide_text">可以预览编辑完成后的问卷整体的呈现形式。</p>
        </div>
        <leadout :qid="questionnaire.id"></leadout>
        
    </div>
</template>

<script>
import Leadout from '@/components/Leadout'

export default ({
    data() {
        return {
            encode_index: '',
            encode_qid: '',
            type: ""
        }
    },
    components:{
        Leadout
    },
    props: ['questionnaire', 'index'],
    mounted() {
        this.initData();
    },
    methods: {
        initData() {
            this.encode_index = this.$UrlEncode.encode(JSON.stringify(this.index * 1234));
            this.encode_qid = this.$UrlEncode.encode(JSON.stringify(this.questionnaire.id * 1234));
            this.type = this.questionnaire.type;
        },
        GoToEdit() {
            if(this.type=='E'){
                this.$router.push({path: '/examquestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
            }
            else if(this.type=='N'){
                this.$router.push({path: '/normalquestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
            }
            else if(this.type=='V'){
                this.$router.push({path: '/votequestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
            }
            else if(this.type=='Y'){
                this.$router.push({path: '/yiqingquestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
            } 
            else {
				this.$router.push({path: '/applyquestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}});
			}
        },
    },
    watch: {
        questionnaire() {
            this.initData();
        }
    }
})
</script>

<style scoped>
.guide_page {
    text-align: left;
    padding-left: 50px;
    height: 650px;
}
.tittle {
    padding-top: 50px;
}
.link {
    margin-top: 50px;
}
.guide_text {
    margin-top: 10px;
}
</style>
